<!--
 * @Author: 17607638761 2856491026@qq.com
 * @Date: 2023-05-17 13:43:01
 * @LastEditors: 17607638761 zoujiaying@yuandian.com
 * @LastEditTime: 2023-07-28 11:40:13
 * @FilePath: \bpm-ui\src\views\middle-platform\unit-ability-overview\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div class="container">
		<div class="head">
			<div class="query-form">
				<yd-form
					v-if="isForm"
					ref="myForm"
					:options="formOptions"
					:model="params.queryData"
					@change="handlerSelectChange"
					@formInit="handlerFormInit"
					@search="handlerFormInit"
				>
					<template #form-btn="props">
						<div>
							<el-button class="yd-form-btn" type="primary" @click="handleSearchClick(props.model)">查询</el-button>
						</div>
					</template>
				</yd-form>
			</div>
		</div>
		<div class="content">
			<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
				<el-tab-pane label="耗时分析" name="1">
					<DetailsSonsumingAnalysis
						ref="myEcharts"
						:responseTimeDistributionScale="echartsData.responseTimeDistributionScale"
						:responseTimeDistributionData="echartsData.responseTimeDistributionData"
						:responseTimeTrendScale="echartsData.responseTimeTrendScale"
						:responseTimeTrendData="echartsData.responseTimeTrendData"
						:interruptResponseTimeScale="echartsData.interruptResponseTimeScale"
						:interruptResponseTimeData="echartsData.interruptResponseTimeData"
						:isInterruptIntervalTime="params.isInterruptIntervalTime"
						:invocationModeName="invocationModeName"
						@echartsClick="echartsClick"
					/>
				</el-tab-pane>
				<el-tab-pane label="请求访问量分析" name="2" lazy>
					<DetailsRequestVisitAnalysis
						:responseCountData="echartsData.responseCountData"
						:visitMaxServerTopScale="echartsData.visitMaxServerTopScale"
						:visitMaxServerTopData="echartsData.visitMaxServerTopData"
						:newMaxServerTopScale="echartsData.newMaxServerTopScale"
						:newMaxServerTopData="echartsData.newMaxServerTopData"
						@echartsClick="echartsClick"
					/>
				</el-tab-pane>
				<el-tab-pane label="返回码分析" name="3" lazy>
					<DetailsReturnCodeAnalysis
						:systemReturnCodeScale="echartsData.systemReturnCodeScale"
						:systemReturnCodeData="echartsData.systemReturnCodeData"
						:businessReturnCodeScale="echartsData.businessReturnCodeScale"
						:businessReturnCodeData="echartsData.businessReturnCodeData"
						@echartsClick="echartsClick"
					/>
				</el-tab-pane>
				<el-tab-pane label="TCP分析" name="4" lazy>
					<DetailsTcpAnalysis
						:tcpScale="echartsData.tcpScale"
						:newSessionData="echartsData.newSessionData"
						:connTimeData="echartsData.connTimeData"
						:clientZeroWindowData="echartsData.clientZeroWindowData"
						:serverZeroWindowData="echartsData.serverZeroWindowData"
						:clientRetransmissionData="echartsData.clientRetransmissionData"
						:serverRetransmissionData="echartsData.serverRetransmissionData"
						:clientResetData="echartsData.clientResetData"
						:serverResetData="echartsData.serverResetData"
						@echartsClick="echartsClick"
					/>
				</el-tab-pane>
			</el-tabs>
			<div class="table">
				<h1>服务调用详情列表</h1>
				<el-button style="margin-left: 15px" type="primary" @click="gridLabelBtnClick">自定义列</el-button>

				<YdTable
					:formData="params.queryData"
					:tableConfig="tableConfig"
					:tableData="state.tableData"
					@sizeChangeHandler="queryDataDeatilFn"
					@currentChangeHandler="queryDataDeatilFn"
					@sortChangeHandler="queryDataDeatilFn"
				></YdTable>
			</div>
		</div>
		<CustomColumn ref="customColumnRef" pageType="detail" />
	</div>
</template>

<script setup lang="ts" name="ability-call-details">
import YdEcharts from '@/components/YdEcharts/index.vue';
import { reactive, ref, computed, onBeforeMount, onActivated, watch, onMounted } from 'vue';
import { LocationQueryValue, useRoute } from 'vue-router';
import { ECOption } from 'echarts';
import type { TabsPaneContext } from 'element-plus';
import 'echarts/lib/component/legend';
import DetailsSonsumingAnalysis from './details-sonsuming-analysis.vue';
import DetailsRequestVisitAnalysis from './details-request-visit-analysis.vue';
import DetailsReturnCodeAnalysis from './details-return-code-analysis.vue';
import DetailsTcpAnalysis from './details-tcp-analysis.vue';
import CustomColumn from '@/components/CustomColumn/index.vue';
import {
	queryDataBusinessResCodeStatistics,
	queryDataDeatil,
	queryDataInterruptTimeTrend,
	queryDataNewSessionCountTopN,
	queryDataRequestCountTopN,
	queryDataResponseSnapshot,
	queryDataServerResCodeStatistics,
	queryDataTcp,
} from '@/api/middle-monitor/ability-server-analysis-details';
import { queryDataResponseTimeDistribution } from '@/api/middle-monitor/ability-server-analysis';
import { queryDataResponse } from '@/api/middle-monitor/unit-ability';
import { calculateTimeBefore, commonFormatter, parseTime, toDecimalFormate2 } from '@/utils/common';
import { publicValue } from '@/api/search/searchOptions';

interface ResponseCountData {
	value: number;
	name: string;
}
interface QueryData {
	startTime: string;
	endTime: string;
	pageSize: number;
	pageNum: number;
	abilityCode: string | LocationQueryValue[] | any;
	serviceCode: string | LocationQueryValue[] | any;
	responseTimeDistribution?: string;
	responseCountData?: ResponseCountData[];
	responseIp?: string;
	newSessionResponseIp?: string;
	serverResCodeMin?: number | string | null;
	serverResCodeMax?: number | string | null;
	businessResCode?: number | string | null;
	newSession?: number | null;
	clientZero?: number | null;
	serverZero?: number | null;
	clientRetry?: number | null;
	serverRetry?: number | null;
	clientReset?: number | null;
	serverReset?: number | null;
}
interface Params {
	isInterruptIntervalTime: boolean;
	queryData: QueryData;
}
const route = useRoute();
const activeName: any = ref('1');
const echartsData = reactive<any>({
	title: {
		text: '',
		left: 'center',
		top: 'bottom',
		textStyle: {
			//文字颜色
			color: '#FFFFFF',
			//字体风格,'normal','italic','oblique'
			fontStyle: 'normal',
			//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
			fontWeight: 500,
			//字体系列
			fontFamily: 'sans-serif',
			//字体大小
			fontSize: 16,
		},
	},
	grid: {
		left: '0%',
		right: '0%',
		top: '5%',
		bottom: '12%',
		containLabel: true,
	},
	barSeriesColor: {
		type: 'liner',
		x: 0,
		y: 1,
		x2: 0,
		y2: 0,
		colorStops: [
			{
				offset: 0,
				color: '#06F4F4',
			},
			{
				offset: 1,
				color: '#1dc69d',
			},
		],
		global: false, // 缺省为 false
	},

	interruptResponseTimeScale: [] as string[], // 中断响应耗时x轴刻度
	interruptResponseTimeData: [] as number[], // 中断响应耗时数据
	responseTimeTrendScale: [] as string[], // 响应耗时趋势x轴刻度
	responseTimeTrendData: [] as number[], // 响应耗时趋势数据
	responseTimeDistributionScale: [] as string[], // 响应耗时分布x轴刻度
	responseTimeDistributionData: [] as number[], // 响应耗时分布数据
	// 耗时分析
	responseCountData: [
		{ value: 0, name: '成功次数' },
		{ value: 0, name: '超时次数' },
		{ value: 0, name: '客户端失败次数' },
		{ value: 0, name: '服务端失败次数' },
	], // 响应量
	visitMaxServerTopScale: [] as string[], // 查询访问量最大的服务器Top10x轴刻度
	visitMaxServerTopData: [] as number[], // 查询访问量最大的服务器Top10数据
	newMaxServerTopScale: [] as string[], // 查询新建会话最大的服务器Top10x轴刻度
	newMaxServerTopData: [] as number[], // 查询新建会话最大的服务器Top10数据
	// 返回码分析
	systemReturnCodeScale: [] as string[], // 系统返回码x轴刻度
	systemReturnCodeData: [] as number[], // 系统返回码数据
	businessReturnCodeScale: [] as string[], // 业务返回码x轴刻度
	businessReturnCodeData: [] as number[], // 业务返回码数据
	// TCP分析
	tcpScale: [] as string[], // tcp分析x轴刻度
	newSessionData: [] as number[], // 新建会话柱状图
	connTimeData: [] as number[], // 建连耗时折线图
	clientZeroWindowData: [] as number[], // 客户端零窗口包数据
	serverZeroWindowData: [] as number[], // 服务端零窗口包数据
	clientRetransmissionData: [] as number[], // 客户端重传包
	serverRetransmissionData: [] as number[], // 服务端重传包
	clientResetData: [] as number[], // 客户端重置包
	serverResetData: [] as number[], // 服务端重置包
	colorGroup: ['#697CF6', '#4DBC84', '#FE5578', '#FE9A0C', '#06F4F4'] as string[],
});
const state = reactive<any>({
	// 解决tab切换时echarts图标宽度不能100%问题
	initEcharts: false,
	// 表格数据
	tableData: [],
	extendData: {},
	// 时间范围数据
	resPointTimeRangeArr: [],
	defaultDateTime: [],
});
const customColumnRef: any = ref<InstanceType<typeof CustomColumn>>();
const params = reactive<Params>({
	isInterruptIntervalTime: true, // 是否中断耗时
	queryData: {
		pageSize: 10,
		pageNum: 1,
		startTime: '',
		endTime: '',
		abilityCode: '',
		serviceCode: '',
		responseTimeDistribution: '',
		...route.query,
	},
});
let test = false;
const formOptions = reactive<FormOptionType>([
	{
		type: 'select',
		label: '',
		prop: 'serviceCode',
		selectKey: 'value',
		selectLabel: 'label',
		api: {
			name: 'queryAbilityServer',
			params: { abilityCode: params.queryData.abilityCode, isServerList: true },
		},
		// cascaderParam: {
		// 	data: params.queryData,
		// 	key: 'abilityCode',
		// },
	},
	{
		type: 'date-picker',
		label: '时间范围',
		prop: 'dateRange',
		dateType: 'datetimerange',
		enableCrossDay: true,
		// shortcutsKeys: ['last1h', 'today', 'lastDay'],
		// defaulShortcutsKey: 'lastlh',
		span: 10,
	},
]);

const tableConfig = reactive<TableConfigType>({
	// remote: queryDataDeatil,
	columns: [
		{
			label: '时间',
			prop: 'endTime',
		},
		{
			label: '请求IP',
			prop: 'requestIp',
		},
		{
			label: '请求端口',
			prop: 'requestPort',
		},
		{
			label: '响应IP',
			prop: 'responseIp',
		},
		{
			label: '响应端口',
			prop: 'responsePort',
		},
		{
			label: '请求字节量',
			prop: 'bytesIn',
			formatter(row: any, val: number) {
				return commonFormatter(val, 'B');
			},
		},
		{
			label: '响应字节量',
			prop: 'bytesOut',
			formatter(row: any, val: number) {
				return commonFormatter(val, 'B');
			},
		},
		{
			label: '请求URL',
			prop: 'oriUrl',
		},
		{
			label: '请求包数',
			prop: 'packageIn',
			hide: true,
			formatter(row: any, val: number) {
				return commonFormatter(val, '个');
			},
		},
		{
			label: '响应包数',
			prop: 'packageOut',
			hide: true,
			formatter(row: any, val: number) {
				return commonFormatter(val, '个');
			},
		},
		{
			label: '系统返回码',
			prop: 'serverResCode',
		},
		{
			label: '业务返回码',
			prop: 'customReturnCode',
		},
		{
			label: '建连耗时',
			prop: 'connSetupTm',
			formatter(row: any, val: number) {
				return toDecimalFormate2(val, 'wm');
			},
		},

		{
			label: '响应耗时',
			prop: 'serverResponseTime',
			formatter(row: any, val: number) {
				return toDecimalFormate2(val, 'wm');
			},
		},
		{
			label: '专属指标',
			prop: 'businessDetailMsg',
			hide: true,
		},

		{
			label: '客户端传输耗时',
			prop: 'clientTranslateTime',
			hide: true,
			formatter(row: any, val: number) {
				return toDecimalFormate2(val, 'wm');
			},
		},
		{
			label: '服务端传输耗时',
			prop: 'serverTranslateTime',
			hide: true,
			formatter(row: any, val: number) {
				return toDecimalFormate2(val, 'wm');
			},
		},
		{
			label: '新建会话',
			prop: 'newSession',
			hide: true,
			formatter(row: any, val: number) {
				return val + '个';
			},
		},
		{
			label: '客户端零窗口包',
			prop: 'csWindow',
			hide: true,
			formatter(row: any, val: number) {
				return val + '个';
			},
		},
		{
			label: '服务端零窗口包',
			prop: 'scWindow',
			hide: true,
			formatter(row: any, val: number) {
				return val + '个';
			},
		},
		{
			label: '客户端重置包',
			prop: 'csReset',
			hide: true,
			formatter(row: any, val: number) {
				return val + '个';
			},
		},
		{
			label: '服务端重置包',
			prop: 'scReset',
			hide: true,
			formatter(row: any, val: number) {
				return val + '个';
			},
		},
		{
			label: '客户端重传包',
			prop: 'csRetran',
			hide: true,
			formatter(row: any, val: number) {
				return val + '个';
			},
		},
		{
			label: '服务端重传包',
			prop: 'scRetran',
			hide: true,
			formatter(row: any, val: number) {
				return val + '个';
			},
		},
	],
	// 序号列
	disableOrderNumber: false,
	loading: true,
	noStripe: true,
	pagination: {
		pageNum: 1,
		pageSize: 10,
		total: 0,
	},
});

// event
function assignMentNull() {
	// 耗时分析
	echartsData.interruptResponseTimeScale.length = 0;
	echartsData.interruptResponseTimeData.length = 0;
	echartsData.responseTimeTrendScale.length = 0;
	echartsData.responseTimeTrendData.length = 0;
	echartsData.responseTimeDistributionScale.length = 0;
	echartsData.responseTimeDistributionData.length = 0;
	// 请求访问量分析
	echartsData.visitMaxServerTopScale.length = 0;
	echartsData.visitMaxServerTopData.length = 0;
	echartsData.newMaxServerTopScale.length = 0;
	echartsData.newMaxServerTopData.length = 0;
	// 系统返回码分析
	echartsData.systemReturnCodeScale.length = 0;
	echartsData.systemReturnCodeData.length = 0;
	echartsData.businessReturnCodeScale.length = 0;
	echartsData.businessReturnCodeData.length = 0;
	// tcp分析
	echartsData.tcpScale.length = 0;
	echartsData.newSessionData.length = 0;
	echartsData.connTimeData.length = 0;
	echartsData.clientZeroWindowData.length = 0;
	echartsData.serverZeroWindowData.length = 0;
	echartsData.clientRetransmissionData.length = 0;
	echartsData.serverRetransmissionData.length = 0;
	echartsData.clientResetData.length = 0;
	echartsData.serverResetData.length = 0;
	echartsData.businessReturnCodeData.length = 0;
}
/**
 * 查询中断次数/耗时趋势
 */
function queryDataInterruptTimeTrendFn() {
	queryDataInterruptTimeTrend(params.queryData).then((res: ApiResponse) => {
		res.data.resLabelTimeArr?.forEach((item: string) => {
			let str = parseTime(item.substring(0, 19), '{h}:{i}');
			echartsData.interruptResponseTimeScale.push(str);
		});
		// 获取时间范围数据，列表查询使用
		state.resPointTimeRangeArr = res.data.resPointTimeRangeArr;
		if (res.data.resFieldMap.interruptCountList !== undefined) {
			res.data.resFieldMap.interruptCountList?.forEach((item: number) => echartsData.interruptResponseTimeData.push(item));
			params.isInterruptIntervalTime = false;
			return;
		}
		res.data.resFieldMap.interruptIntervalTimeList?.forEach((item: number) => echartsData.interruptResponseTimeData.push(item));
	});
}
/**
 * 查询响应耗时趋势
 */
function queryDataResponseFn() {
	queryDataResponse(params.queryData).then((res: ApiResponse) => {
		res.data.resLabelTimeArr?.forEach((item: string) => {
			let str = parseTime(item.substring(0, 19), '{h}:{i}');
			echartsData.responseTimeTrendScale.push(str);
		});
		// 获取时间范围数据，列表查询使用
		state.resPointTimeRangeArr = res.data.resPointTimeRangeArr;
		res.data.resFieldMap.avgServerResponseTimeList?.forEach((item: number) => echartsData.responseTimeTrendData.push(item));
		echartsData.responseTimeTrendData.length = state.resPointTimeRangeArr.length;
	});
}
/**
 * 响应耗时分布
 */
function queryDataResponseTimeDistributionFn() {
	queryDataResponseTimeDistribution(params.queryData).then((res: ApiResponse) => {
		Object.keys(res.data).forEach((key: string) => echartsData.responseTimeDistributionScale.push(key));
		Object.values(res.data).forEach((val: number | any) => echartsData.responseTimeDistributionData.push(val));
	});
}
// 请求访问量分析tab
/**
 * 查询响应量统计
 */
function queryDataResponseSnapshotFn() {
	queryDataResponseSnapshot(params.queryData).then((res: ApiResponse) => {
		echartsData.responseCountData[0].value = res.data.systemSuccessCount;
		echartsData.responseCountData[1].value = res.data.timeoutCount;
		echartsData.responseCountData[2].value = res.data.clientFailCount;
		echartsData.responseCountData[3].value = res.data.serverFailCount;
	});
}
/**
 * 查询访问量最大的服务器Top10
 */
function queryDataRequestCountTopNFn() {
	queryDataRequestCountTopN(params.queryData).then((res: ApiResponse) => {
		res.data?.forEach((item: any) => {
			echartsData.visitMaxServerTopScale.push(item.responseIp);
			echartsData.visitMaxServerTopData.push(item.reqCount);
		});
	});
}
/**
 * 查询新建会话最大的服务器Top10
 */
function queryDataNewSessionCountTopNFn() {
	queryDataNewSessionCountTopN(params.queryData).then((res: ApiResponse) => {
		res.data?.forEach((item: any) => {
			echartsData.newMaxServerTopScale.push(item.responseIp);
			echartsData.newMaxServerTopData.push(item.newSessionCount);
		});
	});
}

// 返回码分析模块
/**
 * 查看系统返回码统计
 */
function queryDataServerResCodeStatisticsFn() {
	queryDataServerResCodeStatistics(params.queryData).then((res: ApiResponse) => {
		res.data?.forEach((item: { reqCount: number; serverResCode: number }) => echartsData.systemReturnCodeScale.push(item.serverResCode));
		res.data?.forEach((item: { reqCount: number; serverResCode: number }) => echartsData.systemReturnCodeData.push(item.reqCount));
	});
}
/**
 * 查看业务返回码统计
 */
function queryDataBusinessResCodeStatisticsFn() {
	queryDataBusinessResCodeStatistics(params.queryData).then((res: ApiResponse) => {
		res.data?.forEach((item: { reqCount: number; businessResCode: string }) => echartsData.businessReturnCodeScale.push(item.businessResCode));
		res.data?.forEach((item: { reqCount: number; businessResCode: string }) => echartsData.businessReturnCodeData.push(item.reqCount));
	});
}

// TCP分析
/**
 * 查询TCP数据
 */
function queryDataTcpFn() {
	queryDataTcp(params.queryData).then((res: ApiResponse) => {
		res.data?.resLabelTimeArr.forEach((item: string) => {
			let str = parseTime(item.substring(0, 19), '{h}:{i}');
			echartsData.tcpScale.push(str);
		});
		// 获取时间范围数据，列表查询使用
		state.resPointTimeRangeArr = res.data.resPointTimeRangeArr;
		// 新建会话、建连耗时的变化趋势
		res.data?.resFieldMap.avgConnSetupTmList.forEach((item: number) => echartsData.connTimeData.push(item));
		res.data?.resFieldMap.newSessionCountList.forEach((item: number) => echartsData.newSessionData.push(item));
		res.data?.resFieldMap.clientZeroCountList.forEach((item: number) => echartsData.clientZeroWindowData.push(item));
		res.data?.resFieldMap.serverZeroCountList.forEach((item: number) => echartsData.serverZeroWindowData.push(item));
		res.data?.resFieldMap.clientRetryCountList.forEach((item: number) => echartsData.clientRetransmissionData.push(item));
		res.data?.resFieldMap.serverRetryCountList.forEach((item: number) => echartsData.serverRetransmissionData.push(item));
		res.data?.resFieldMap.clientResetCountList.forEach((item: number) => echartsData.clientResetData.push(item));
		res.data?.resFieldMap.serverResetCountList.forEach((item: number) => echartsData.serverResetData.push(item));
	});
}

/**
 * 查询服务调用详情列表（默认）
 */
function queryDataDeatilFn() {
	Object.keys(params.queryData).forEach((key: string) => {
		if (key === 'invocationMode') {
			delete params.queryData[key];
		}
	});
	tableConfig.loading = true;
	queryDataDeatil(params.queryData)
		.then((res: ApiResponse) => {
			tableConfig.loading = false;
			state.tableData = res.data.data;
			tableConfig.pagination!.total = res.data.total;
		})
		.catch((e: any) => {
			tableConfig.loading = false;
		});
}

async function sonsumingInitRequest() {
	await assignMentNull();
	await queryDataDeatilFn();
	if (invocationModeName.value === 'API' || invocationModeName.value === 'SDK' || invocationModeName.value === 'ApiOrSdk') {
		await queryDataInterruptTimeTrendFn();
	}
	await queryDataResponseFn();
	await queryDataResponseTimeDistributionFn();
}
async function requestVisitInitRequest() {
	await assignMentNull();
	await queryDataDeatilFn();
	await queryDataResponseSnapshotFn();
	await queryDataRequestCountTopNFn();
	await queryDataNewSessionCountTopNFn();
}
async function returnCodeInitRequest() {
	await assignMentNull();
	await queryDataDeatilFn();
	await queryDataServerResCodeStatisticsFn();
	await queryDataBusinessResCodeStatisticsFn();
}
async function tcpInitRequest() {
	await assignMentNull();
	await queryDataDeatilFn();
	await queryDataTcpFn();
}
/**
 * 表单初始化数据
 */
// 格式化传过来的参数
function initQuery(query: anyObj, formData: FormModelType) {
	try {
		for (let key in query) {
			if (Array.isArray(formData[key])) {
				formData[key] = [];
				if (query[key]) {
					formData[key].push(query[key]);
				}
			} else {
				formData[key] = query[key];
			}
		}
	} catch {
		for (let key in query) {
			formData[key] = query[key];
		}
	}
}
const myForm = ref();
let isForm = ref(false);

function handlerFormInit() {
	initQuery(route.query, params.queryData);
	sessionStorage.setItem('cacheDetailsAbilityCode', params.queryData.abilityCode);
	state.defaultDateTime[0] = params.queryData.startTime;
	state.defaultDateTime[1] = params.queryData.endTime;
	invocationModeName.value = route.query.invocationMode;
	sonsumingInitRequest();
}
onMounted(() => {
	isForm.value = false;
	let res = sessionStorage.getItem('cacheDetailsAbilityCode');
	setTimeout(() => {
		isForm.value = true;
		// if (res === sessionStorage.getItem('cacheDetailsAbilityCode')) {
		if (res === params.queryData.abilityCode) {
			return;
		}
		myForm.value?.setOptions('serviceCode', { isServerList: true, ...params.queryData });
	}, 0);
});
/**
 * 自定义列
 */
function gridLabelBtnClick() {
	customColumnRef.value.handleOpen('bpm3.customField.serverRequestDetails', tableConfig.columns);
}

// emit
/**
 * 搜索
 */
function handleSearchClick(data: any) {
	requestAll();
}
/**
 * 下拉框change
 */
let invocationModeName = ref('' as string | any);
function handlerSelectChange(options: BaseOptionType, value: any) {
	console.log(options, value, '下拉框change');
	if (options.type === 'select') {
		let res = options.children?.filter((item: any) => item.serviceCode === value);
		invocationModeName.value = res && res[0].invocationModeName;
		params.queryData.serviceCode = value;
	} else {
		state.defaultDateTime[0] = value[0];
		state.defaultDateTime[1] = value[1];
	}
	requestAll();
}
function requestAll() {
	dateTimeFn(null);
	assignParamsMentNull();
	if (activeName.value === '1') {
		sonsumingInitRequest();
		return;
	}
	if (activeName.value === '2') {
		requestVisitInitRequest();
		return;
	}
	if (activeName.value === '3') {
		returnCodeInitRequest();
		return;
	}
	if (activeName.value === '4') {
		tcpInitRequest();
		return;
	}
}
const handleClick = (tab: TabsPaneContext, event: Event) => {
	activeName.value = tab.props.name;
	assignParamsMentNull();
	requestAll();
};
function dateTimeFn(e: any) {
	let dateTime = [
		'中断时长变化趋势',
		'中断次数变化趋势',
		'平均响应耗时趋势',
		'中断次数变化趋势',
		'新建会话量',
		'建连耗时',
		'客户端零窗口包',
		'服务端零窗口包',
		'客户端重传包',
		'服务端重传包',
		'客户端重置包',
		'服务端重置包',
	];
	if (dateTime.includes(e?.seriesName)) {
		params.queryData.startTime = state.resPointTimeRangeArr[e.dataIndex][0];
		params.queryData.endTime = state.resPointTimeRangeArr[e.dataIndex][1];
		// state.defaultDateTime[0] = params.queryData.startTime;
		// state.defaultDateTime[1] = params.queryData.endTime;
	} else {
		params.queryData.startTime = state.defaultDateTime[0];
		params.queryData.endTime = state.defaultDateTime[1];
	}
}
function assignParamsMentNull() {
	params.queryData.responseTimeDistribution = '';
	params.queryData.responseIp = '';
	params.queryData.newSessionResponseIp = '';
	params.queryData.serverResCodeMin = null;
	params.queryData.serverResCodeMax = null;
	params.queryData.businessResCode = '';
	params.queryData.newSession = null;
	params.queryData.clientZero = null;
	params.queryData.serverZero = null;
	params.queryData.clientRetry = null;
	params.queryData.serverRetry = null;
	params.queryData.clientReset = null;
	params.queryData.serverReset = null;
}
function echartsClick(e: any) {
	console.log(e, 'echarts点击事件');
	dateTimeFn(e);
	assignParamsMentNull();
	switch (e.seriesName) {
		case '响应耗时分布':
			params.queryData.responseTimeDistribution = e.name;
			break;
		case '中断时长变化趋势':
			break;
		case '中断次数变化趋势':
			params.queryData.serverResCodeMin = 500;
			params.queryData.serverResCodeMax = 600;
			break;
		case '响应量':
			if (e.data.name === '成功次数') {
				params.queryData.serverResCodeMin = 100;
				params.queryData.serverResCodeMax = 400;
			} else if (e.data.name === '超时次数') {
				params.queryData.responseTimeDistribution = '超时响应';
			} else if (e.data.name === '客户端失败次数') {
				params.queryData.serverResCodeMin = 400;
				params.queryData.serverResCodeMax = 500;
			} else if (e.data.name === '服务端失败次数') {
				params.queryData.serverResCodeMin = 500;
				params.queryData.serverResCodeMax = 600;
			}
			break;
		case '访问量最大服务器TOP10':
		case '访问量最大服务器':
			params.queryData.responseIp = e.name;
			break;
		case '新建会话量TOP10':
		case '新建会话量':
			params.queryData.newSession = 1;
			params.queryData.newSessionResponseIp = e.name;
			break;
		case '系统返回码':
			params.queryData.serverResCodeMin = e.name;
			params.queryData.serverResCodeMax = Number(e.name) + 1;
			break;
		case '业务返回码':
			params.queryData.businessResCode = e.name;
			break;
		case '建连耗时':
			params.queryData.newSession = 1;
			break;
		case '客户端零窗口包':
			params.queryData.clientZero = 1;
			break;
		case '服务端零窗口包':
			params.queryData.serverZero = 1;
			break;
		case '客户端重传包':
			params.queryData.clientRetry = 1;
			break;
		case '服务端重传包':
			params.queryData.serverRetry = 1;
			break;
		case '客户端重置包':
			params.queryData.clientReset = 1;
			break;
		case '服务端重置包':
			params.queryData.serverReset = 1;
			break;
		default:
			queryDataDeatilFn();
	}
	Object.keys(params.queryData).forEach((key: string) => {
		if (params.queryData[key] === '' || params.queryData[key] === null || params.queryData[key] === undefined || !params.queryData[key]) {
			delete params.queryData[key];
		}
	});
	queryDataDeatilFn();
}
</script>

<style scoped lang="scss">
@import '../index.scss';
@import '@/styles/variables.module.scss';
.container {
	.table {
		h1 {
			display: inline-block;
			font-size: 20px;
			margin-bottom: 10px;
			font-weight: 500;
			margin-top: 20px;
			margin-bottom: 10px;
		}
	}
}
</style>
